<template>
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <div class="">
      <a-form
        ref="formRef"
        class="jeecg-basic-table-form"
        @keyup.enter.native="searchQuery"
        :model="queryParam"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row :gutter="24">
          <a-col :xl="5" :lg="5" :md="5" :sm="24">
            <a-form-item label="检测类型" name="checkType">
              <a-select v-model:value="queryParam.checkType">
                <a-select-option value="委托检测">委托检测</a-select-option>
                <a-select-option value="监督抽查">监督抽查</a-select-option>
                <a-select-option value="科研项目">科研项目</a-select-option>
                <a-select-option value="临时任务">临时任务</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="11" :xl="11" :md="11" :sm="24">
            <a-form-item label="时间" name="handler">
              <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="queryParam.startTime"/>
              <span style="padding:0 10px;">~</span>
              <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="queryParam.endTime"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
              <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 个人工作量统计 -->
    <div class="taskStatistics">
      <!-- 标题 -->
      <!-- <h2 class="taskStatisticsTitle">个人工作量统计</h2> -->
      <!-- 数量 -->
      <a-row type="flex" justify="start" :gutter="16" class="counting">
        <a-col :sm="24" :md="12" :lg="12">
          <div class="countBox green">
            <div class="averageBox">
              <div class="leftContentIcon tobeTestIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">当月样品数</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.samANum }}<span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox">
              <div class="leftContentIcon currentTextIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">当月待检样品</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.samBNum }}<span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox">
              <div class="leftContentIcon tobeTestIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">当月已检样品</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.samCNum }}<span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox">
              <div class="leftContentIcon currentTextIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">样品总数</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.samDNum }}<span class="unit">个</span> </p>
              </div>
            </div>
          </div>
        </a-col>
        <!-- <a-col :sm="24" :md="6" :lg="6">
          <div class="countBox green">
            <div class="averageBox">
              <div class="leftContentIcon tobeTestIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">当月已检样品</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.samCNum }}<span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox">
              <div class="leftContentIcon currentTextIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">样品总数</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.samDNum }}<span class="unit">个</span> </p>
              </div>
            </div>
          </div>
        </a-col> -->
        <a-col :sm="24" :md="12" :lg="12">
          <div class="countBox yellowGreen">
            <div class="averageBox">
              <div class="leftContentIcon currentTestTimeIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">当月项目数</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.itemANum }}<span class="unit">个</span></p>
              </div>
            </div>
            <div class="averageBox">
              <div class="leftContentIcon currentWorkOvertimeIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">当月待检项目</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.itemBNum }}<span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox">
              <div class="leftContentIcon accumulateTestIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">当月已检项目</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.itemCNum }} <span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox" style="padding-left: 6%">
              <div class="leftContentIcon accumulateTestTimeIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">项目总数</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.itemDNum }}<span class="unit">个</span></p>
              </div>
            </div>
          </div>
        </a-col>
        <!-- <a-col :sm="24" :md="6" :lg="6">
          <div class="countBox blue">
            <div class="averageBox">
              <div class="leftContentIcon accumulateTestIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">当月已检项目</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.itemCNum }} <span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox" style="padding-left: 6%">
              <div class="leftContentIcon accumulateTestTimeIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">项目总数</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadList.itemDNum }}<span class="unit">个</span></p>
              </div>
            </div>
          </div>
        </a-col> -->
      </a-row>
      <div class="taskBox">
        <!-- 进行中任务 -->
        <div class="taskProcess">
          <div class="chartsBox">
            <div class="titleText">每月检测样品数</div>
            <div class="echarts">
              <StatisticalChart :flag="flag1" :chartData="samNum"></StatisticalChart>
            </div>
          </div>
        </div>
        <a-select class="selectInfo" v-model:value="value" label-in-value :options="options" @change="handleChange"> </a-select>
        <!-- 已完成情况 -->
        <div class="taskCompleted">
          <div class="chartsBox">
            <div class="titleText">每月检测项目数</div>
            <div class="echarts">
              <StatisticalChart ref="monthTimeBar" :flag="flag2" :chartData="itemNum"></StatisticalChart>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="items-report" setup>
  import { ref, reactive,onMounted } from 'vue';
  import { itemsInfolist, itemsStatisticalDataList } from './LabItemDataStatistics.api';
  import StatisticalChart from './components/StatisticalChart.vue';
  import dayjs from 'dayjs';
  interface Value {
    value?: string;
    label?: string;
  }

  const formRef = ref();
  const queryParam = reactive<any>({
    checkType:'',
    startTime:'',
    endTime:'',
  });

  const firstDay = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
  queryParam.startTime= dayjs(firstDay).format('YYYY-MM-DD');
  // 获取下个月的第一天，然后减去一天得到当月的最后一天
  const lastDay = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1);
  lastDay.setDate(lastDay.getDate() - 1);
	queryParam.endTime=dayjs(lastDay).format('YYYY-MM-DD');

  let calendarDate = new Date();
  let calendarYear = ref(calendarDate.getFullYear());
  let personalWorkloadList = ref<any>([]);
  const flag1 = <String>'1';
  const flag2 = <String>'2';
  // 每月检测项目数
  let itemNum = ref([]);  
  // 每月检测样品数
  let samNum = ref([]);
  //統計图下拉
  //下拉框
  let options = ref<SelectTypes['options']>([]);
  //获取当前年
  let date = new Date();
  let year = date.getFullYear();
  let value = ref<Value>({ value: date.getFullYear() });
  for (let i = 0; i < 10; i++) {
    options.value.push({
      value: year,
      label: year,
    });
    year--;
  }
  const handleChange = (value: Value) => {
    getStatisticsList(value.value);
  };
  //获取基本实验数据信息
  const getitemsInfolist = async (params) =>{
    console.log('queryParam',params);
    const result = await itemsInfolist(params);
    if(result.code===200){
      if(result.result){
        personalWorkloadList.value = result.result;
      }
    }
  }
  //获取统计信息
  const getStatisticsList = async (year) => {
    let params = {
      year: year,
    };
    let result = await itemsStatisticalDataList(params);
    if (result.success === true) {
      itemNum.value = result.result.itemNum;
      samNum.value = result.result.samNum;
    }
  };   
  const init = () => {
    getitemsInfolist(queryParam);
    getStatisticsList(calendarYear.value);    
  };
  onMounted(()=>{
    init();
  })
  //点击查询按钮事件回调
  const searchQuery = () =>{
    getitemsInfolist(queryParam);
  }
  //重置
  function searchReset() {
    formRef.value.resetFields();
    //刷新数据
  }
  const labelCol = reactive({
    xs: { span: 24 },
    sm: { span: 7 },
  });
  const wrapperCol = reactive({
    xs: { span: 24 },
    sm: { span: 16 },
  });
  
</script>
<style lang="less" scoped>

.taskStatistics {
    border-radius: 2px;
    background: #fff;
    padding-top: 20px;

    .taskStatisticsTitle {
      padding: 15px 16px 8px 24px;
      margin-bottom: 0px;
    }

    .counting {
      padding: 20px 16px 8px 16px;

      .countBox {
        // padding: 0 8px;
        padding-left: 3%;
        border-radius: 12px;
        width: 100%;
        height: 100px;
        display: flex;
      }

      .green {
        background: linear-gradient(to right, #96e7de, #82dbd1);
      }

      .yellowGreen {
        background: linear-gradient(to right, #e5e7a7, #d5d779);
      }

      .blue {
        background: linear-gradient(to right, #a3dde9, #67d0e7);
      }

      .averageBox {
        flex: 1;
        display: flex;
        padding: 12px 0% 12px 2%;
        align-items: center;

        .leftContentIcon {
          width: 44px;
          height: 44px;
          margin-right: 10px;
        }

        .centerContentInfo {
          .centerContentInfoText {
            font-size: 14px;
            color: #289a8c;
            font-weight: bold;
            line-height: 20px;
            margin-bottom: 10px;
          }

          .centerContentInfoNumber {
            font-size: 24px;
            color: #0a7165;
            font-weight: bold;
            line-height: 36px;
            display: flex;
            align-items: center;
            margin-bottom:10px;

            .unit {
              font-size: 14px;
              color: #6f720b;
              font-weight: normal;
              display: inline-block;
              line-height: 20px;
              margin: 7px 0 0 4px;
            }
          }
        }

        .tobeTestIcon {
          background: url('/@/assets/images/home/toBeTest-icon.png') no-repeat;
          background-size: 100% auto;
        }

        .currentTextIcon {
          background: url('/@/assets/images/home/currentTest-icon.png') no-repeat;
          background-size: 100% auto;
        }

        .currentTestTimeIcon {
          background: url('/@/assets/images/home/currentTestTime-icon.png') no-repeat;
          background-size: 100% auto;
        }

        .currentWorkOvertimeIcon {
          background: url('/@/assets/images/home/current-work-overtime-icon.png') no-repeat;
          background-size: 100% auto;
        }

        .accumulateTestIcon {
          background: url('/@/assets/images/home/accumulate-test-icon.png') no-repeat;
          background-size: 100% auto;
        }

        .accumulateTestTimeIcon {
          background: url('/@/assets/images/home/accumulate-test-time-icon.png') no-repeat;
          background-size: 100% auto;
        }
      }
    }

    .taskBox {
      display: flex;
      padding: 24px 20px 10px 20px;
      // height: 339px;
      box-sizing: border-box;
      // padding-top: 60px;
      position: relative;
    }

    .selectInfo {
      position: absolute;
      top: 10px;
      right: 20px;
      // left: 0;
      margin: auto auto;
      z-index: 99;
      width: 100px;
    }

    .taskProcess {
      flex: 1;
      margin-right: 30px;
    }

    .taskCompleted {
      flex: 1;
    }

    .echarts {
      margin-top: 15px;
      width: 100;
    }

    #mychart,
    #mychartPie {
      width: 100%;
      height: 250px;
    }

    .titleText {
      font-size: 14px;
      line-height: 22px;
      font-weight: bold;
      color: #54504f;
      position: relative;
      padding-left: 16px;
      text-align: left;
    }

    .titleText::before {
      content: '';
      width: 4px;
      height: 22px;
      background: #37a9a7;
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      left: 0;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1720px) {
    .taskStatistics .counting .averageBox {
      padding: 12px 0% 12px 2%;
    }

    .taskStatistics .counting .averageBox .centerContentInfo .centerContentInfoText {
      margin-bottom: 10px;
    }
  }

  @media screen and (max-width: 998px) {
    .taskBox {
      flex-direction: column;
    }
  }
  @media screen and (max-width: 1919px) {
    .taskStatistics .counting .averageBox .centerContentInfo .centerContentInfoText{
      font-size: 13px;
    }
  }


</style>
